<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('固定资产信息列表')"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <label>使用部门：</label>
                            <input type="text" name="department" id="buMen"/>
                        </li>
                        <li>
                            <label>购置日期：</label>
                            <input type="month" id="startTime" placeholder="开始日期"
                                   name="params[beginPurchaseDate]"/>
                            <span>-</span>
                            <input type="month" id="endTime" placeholder="结束日期"
                                   name="params[endPurchaseDate]"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="searchData()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="col-sm-12 select-table table-striped" id="echarts-bar-chart" >
<!--            <div class="echarts" style="width:1300px;height:600px; margin: 0 auto;"-->
<!--                 id="echarts-bar-chart">-->
<!--            </div>-->
        </div>

    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: echarts-js"/>
<script type="text/javascript">
    var prefix = ctx + "asset/assets";
    var barChart = echarts.init(document.getElementById("echarts-bar-chart"));


    var xAxisData = [];
    var yAxisData = [];

    function processData(data) {
        for (var i = 0; i < data.length; i++) {
            var item = data[i];
            xAxisData.push(item.queryDate); // 将 object 中 x 属性的值添加到 X 轴坐标数据数组中
            yAxisData.push(item.count); // 将 object 中 y 属性的值添加到 Y 轴坐标数据数组中
        }
        return [xAxisData, yAxisData];
    }

    function searchData() {
        var startTime = document.getElementById("startTime").value;
        var endTime = document.getElementById("endTime").value;
        var department = document.getElementById("buMen").value;
        var FixedAssetsStatementVo = {
            "params": {
                "beginPurchaseDate": startTime,
                "endPurchaseDate": endTime
            },
            "department": department
        };

        // 发送GET请求到后端获取参数
        $.post(prefix + '/statementList', FixedAssetsStatementVo, function (response) {
            xAxisData = [];
            yAxisData = [];
            [xAxisData, yAxisData] = processData(response.data);
            barChart.setOption({
                xAxis: {
                    data: xAxisData
                },
                series: [
                    {
                        data: yAxisData
                    }
                ]
            });
        });
    };

    $.ajax({
        url: prefix + '/statementList',
        type: 'POST', // 根据后端接口定义来设置请求类型
        dataType: 'json', // 根据后端接口定义来设置返回数据类型
        success: function (List) {
            var [xAxisData, yAxisData] = processData(List.data);
            var baroption = {
                title: {
                    text: '固定资产信息报表'
                },
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    x: 30,
                    x2: 40,
                    y2: 24
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: xAxisData
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '数量',
                        type: 'bar',
                        data: yAxisData,
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            };
            barChart.setOption(baroption);
            window.onresize = barChart.resize;
        },
        error: function (xhr, textStatus, errorThrown) {
            console.log('请求失败：' + textStatus);
        }
    });

    // // 为柱状图绑定点击事件
    // barChart.on('click', function(params) {
    //     console.log(params.value);
    //     // 获取被点击的柱状图的信息
    //     var purchaseDate = params.name;
    //     var count = params.value;
    //
    //     // 根据获取到的信息构造URL参数，并打开一个新的窗口展示详细信息
    //     // var url = "../assets/statementList.html" + purchaseDate + "&count=" + count;
    //     var url = "../assets/statementList";
    //     window.open(url);
    // });

</script>
</body>
</html>
